<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const isLogin = ref(false);
const userInfo = ref({
    avatar: '/src/assets/images/avatar_default.png',
    username: ''
});

// 导航列表数据
const navItems = [
    { icon: 'records-o', title: '全部订单', path: '/orders' },
    { icon: 'points', title: '我的积分', path: '/points' },
    { icon: 'gift-o', title: '我的红包', path: '/coupons' },
    { icon: 'service-o', title: '联系客服', path: '/service' }
];

// 订单类型列表
const orderTypes = [
    { icon: 'pending-payment', text: '待付款', path: '/orders/pending' },
    { icon: 'records-o', text: '待收货', path: '/orders/receiving' },
    { icon: 'tosend', text: '待评价', path: '/orders/review' },
    { icon: 'after-sale', text: '退款/售后', path: '/orders/after-sale' }
];

// 跳转处理函数
const handleNavClick = (path) => {
    if (!isLogin.value) {
        router.push('/login');
        return;
    }
    router.push(path);
};
</script>

<template>
    <van-row class="user-info" align="center">
        <van-image 
            :src="userInfo.avatar" 
            round 
            width="100" 
            height="100"
        />
        <template v-if="!isLogin">
            <RouterLink :to="{ name: 'login' }">
                <span class="user-info-name">登录</span>
            </RouterLink>
            <span class="user-info-name">|</span>
            <RouterLink :to="{ name: 'register' }">
                <span class="user-info-name">注册</span>
            </RouterLink>
        </template>
        <template v-else>
            <span class="user-info-name">{{ userInfo.username }}</span>
        </template>
    </van-row>

    <van-row class="user-links">
        <van-col 
            v-for="(item, index) in orderTypes" 
            :key="index"
            span="6" 
            @click="handleNavClick(item.path)"
        >
            <van-icon :name="item.icon"/>
            {{ item.text }}
        </van-col>
    </van-row>

    <van-cell-group>
        <van-cell 
            v-for="(item, index) in navItems" 
            :key="index"
            :icon="item.icon" 
            :title="item.title" 
            is-link 
            @click="handleNavClick(item.path)"
        />
    </van-cell-group>
</template>

<style lang="scss" scoped>
.user-info {
    padding: 15px;
    background: url(../assets/images/user_head_bg.png) no-repeat center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .user-info-name {
        display: inline-block;
        color: white;
        padding: 0 5px;
    }
}

// 按钮列表
.user-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    // 这里的图标是特殊字体实现的
    .van-icon {
        display: block;
        font-size: 24px;
    }
    .van-col {
        cursor: pointer;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>